/*
#########################################################################
#
# Copyright (C) 2019 OSGeo
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#
#########################################################################
*/

@import '../node_modules/react-calendar-heatmap/dist/styles.css';
@import '../node_modules/flag-icon-css/css/flag-icon.css';

$color-primary: #2c689c;
$color-secondary: #ff8f31;
$color-dark: #333333;
$calendar-heatmap-color: lighten($color-primary, 15%);

.react-calendar-heatmap .color-empty { fill: transparent; stroke: #eeeeee; }
.react-calendar-heatmap .color-scale-0 { fill: #eeeeee; }
.react-calendar-heatmap .color-scale-1 { fill: lighten($calendar-heatmap-color, 30%); }
.react-calendar-heatmap .color-scale-2 { fill: lighten($calendar-heatmap-color, 20%); }
.react-calendar-heatmap .color-scale-3 { fill: lighten($calendar-heatmap-color, 10%); }
.react-calendar-heatmap .color-scale-4 { fill: $calendar-heatmap-color; }
.react-calendar-heatmap .color-scale-5 { fill: darken($calendar-heatmap-color, 10%); }
.react-calendar-heatmap .color-scale-6 { fill: darken($calendar-heatmap-color, 20%); }
.react-calendar-heatmap .color-scale-7 { fill: darken($calendar-heatmap-color, 30%); }
.react-calendar-heatmap .selected-day { stroke: $color-secondary; }

.calendar-heatmap-container {
    position: relative;
    height: 140px;
    > svg {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

.scroll-table {
    word-break: break-all;
    table, thead, tbody {
        display: block;
    }
    tr { display: flex; }
    th { flex: 1; }
    tbody {
        max-height: 400px;
        overflow: auto;
    }
    &.flex-cell {
        th, td { flex: 1; }
    }
    h4 {
        margin-top: 16px;
    }
}

:root {
    font-size: 16px;
}
.monitoring {
    display: flex;
    flex-direction: column;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
.monitoring .navbar  {
    position: relative;
    margin: 0;
    min-height: auto;
    z-index: 2000;
}
.monitoring #wrap {
    flex: 1;
    padding: 0;
    display: flex;
    position: relative;
    height: 100%;
}
.monitoring #wrap .container {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    height: 100%;
}
.monitoring #wrap .container .row {
    margin-left: 0;
    margin-right: 0;
}
.monitoring div#monitoring {
    margin-top: 0;
}
.monitoring div#monitoring:last-child {
    position: relative;
    flex: 1;
    display: flex;
    height: 100%;
    margin-top: 0;
}

.monitoring footer {
    background-color: #333;
    padding-top: 8px;
    padding-bottom: 8px;
    display: none;
}
.monitoring footer .row {
    align-content: center;
    align-items: center;
    display: flex; 
}

.analytics footer .list-unstyled {
    margin: 0;
}